import proj4 from 'proj4';
import { register } from 'ol/proj/proj4';
import { Projection, addProjection } from 'ol/proj';
import TileLayer from 'ol/layer/Tile';
import TileGrid from 'ol/tilegrid/TileGrid';
import VectorTileLayer from 'ol/layer/VectorTile';
import { XYZ } from 'ol/source';
import { MapService, TileSuperMapRest, Util } from '@supermap/iclient-ol';
// import {VectorTileSuperMapRest,VectorTileStyles} from "@supermap/iclient-ol";
import { VectorTileStyles } from '@/map/VectorTileStyles';
import { VectorTileSuperMapRest } from '@/map/VectorTileSuperMapRest';
import MVT from 'ol/format/MVT';
import { GeoJSON as GeoJSonFormat } from 'ol/format';

//将4490注册到projection中
proj4.defs(
  'EPSG:4490',
  'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4490"]]'
);
register(proj4);

//重写projection4490
let projection = new Projection({
  code: 'EPSG:4490',
  units: 'degrees',
  axisOrientation: 'neu',
});
projection.setExtent([-180, -90, 180, 90]);
projection.setWorldExtent([-180, -90, 180, 90]);
//覆盖添加到projection中
addProjection(projection);

export function getProjection() {
  return projection;
}

//地图服务网址
export function iServerHttp() {
  return import.meta.env.VITE_APP_MAP_URL;
  // return "http://10.13.155.192:8090"
  // return "http://10.7.209.199:8090"
  //代理
  // return "http://10.7.208.233:8080"
}

//米转度
export function meterToDegree(meter) {
  let degree = meter / ((Math.PI * 2 * 6378137) / 360);

  return degree;
}

//度转米
export function degreeToMeter(degree) {
  let meter = degree * ((Math.PI * 2 * 6378137) / 360);

  return meter;
}

//自定义比例尺（天地图fxpc）
export function getResolutions() {
  let resolutions = [];
  //MVT 矢量瓦片第0级分辨率为全球范围宽度除以瓦片宽度512.
  //常见坐标系第0级分辨率   WebMercator(3857):2*6378137*Math.PI/512    WGS84(4326):360.0/512    China2000(4490):360.0/512    Beijing54(4214):360.0/512     Xian80(4610):360.0/512
  let topResolution = 360.0 / 512;
  for (let z = 0; z < 18; z++) {
    let resolution = topResolution / Math.pow(2, z);
    resolutions[z] = resolution;
    let dpi = 96; //超图使用，防止图层偏移
    // let dpi = 90.7142857142857;//自定义比例尺
    // let scale = 1 / (resolution / 0.0254 * dpi * (2 * Math.PI * 6378137) / 360);
  }

  return resolutions;
}

//自定义比例尺3857
export function getResolutions3857() {
  let resolutions = [];
  //MVT 矢量瓦片第0级分辨率为全球范围宽度除以瓦片宽度512.
  //常见坐标系第0级分辨率   WebMercator(3857):2*6378137*Math.PI/512    WGS84(4326):360.0/512    China2000(4490):360.0/512    Beijing54(4214):360.0/512     Xian80(4610):360.0/512
  let topResolution = (2 * 6378137 * Math.PI) / 512;
  for (let z = 0; z < 18; z++) {
    let resolution = topResolution / Math.pow(2, z);
    resolutions[z] = resolution;
  }

  return resolutions;
}

function getMatrixIds() {
  let matrixIds = [];
  for (let z = 0; z < 18; ++z) {
    matrixIds[z] = z;
  }
  return matrixIds;
}

//获取tileGrid（自定义比例尺）
export function getTileGrid(origin, extent) {
  return new TileGrid({
    origin: origin,
    extent: extent,
    resolutions: getResolutions(),
    matrixIds: getMatrixIds(),
    tilesSize: [256, 256],
  });
}

//获取tileGrid（自定义比例尺）3857
export function getTileGrid3857(origin, extent) {
  return new TileGrid({
    origin: origin,
    extent: extent,
    resolutions: getResolutions3857(),
    matrixIds: getMatrixIds(),
    tilesSize: [256, 256],
  });
}

//fxpc天地图街道地图底图
export function getTiandituVecMap() {
  return new TileLayer({
    title: '天地图街道地图底图',
    source: new XYZ({
      crossOrigin: 'Anonymous', // 是否请求跨域操作
      url: 'https://fxpc.mem.gov.cn/data_preparation/171dd1d5-bbb3-483a-a7f6-50d6d98cee1f/d9ffc071-50dd-4780-a617-673d17921e22/wmts?service=wmts&request=gettile&version=1.0.0&layer=vec&style=default&tilematrixset=c&format=tiles&tilematrix={z}&tilerow={y}&tilecol={x}&geokey=94E99EB4FEB9B48CD5348F7BCF5BB620',
      projection: getProjection(),
    }),
  });
}

//fxpc天地图街道地图注记
export function getTiandituVecText() {
  return new TileLayer({
    title: '天地图街道地图注记',
    source: new XYZ({
      crossOrigin: 'Anonymous', // 是否请求跨域操作
      url: 'https://fxpc.mem.gov.cn/data_preparation/171dd1d5-bbb3-483a-a7f6-50d6d98cee1f/13f8b69d-98dc-4276-bbf0-9c4c372acabc/wmts?service=wmts&request=gettile&version=1.0.0&layer=cva&style=default&tilematrixset=c&format=tiles&tilematrix={z}&tilerow={y}&tilecol={x}&geokey=94E99EB4FEB9B48CD5348F7BCF5BB620',
      projection: getProjection(),
    }),
  });
}

//fxpc天地图卫星影像底图
export function getTiandituImgMap() {
  return new TileLayer({
    title: '天地图卫星影像底图',
    source: new XYZ({
      crossOrigin: 'Anonymous', // 是否请求跨域操作
      url: 'https://fxpc.mem.gov.cn/data_preparation/171dd1d5-bbb3-483a-a7f6-50d6d98cee1f/16646cf6-305e-45b3-9be9-81f7dfc9813f/wmts?service=wmts&request=gettile&version=1.0.0&layer=img&style=default&tilematrixset=c&format=tiles&tilematrix={z}&tilerow={y}&tilecol={x}&geokey=94E99EB4FEB9B48CD5348F7BCF5BB620',
      projection: getProjection(),
    }),
  });
}

//fxpc天地图卫星影像注记
export function getTiandituImgText() {
  return new TileLayer({
    title: '天地图卫星影像注记',
    source: new XYZ({
      crossOrigin: 'Anonymous', // 是否请求跨域操作
      url: 'https://fxpc.mem.gov.cn/data_preparation/171dd1d5-bbb3-483a-a7f6-50d6d98cee1f/0f7d6202-bdad-4cc7-a3b1-e86ec950f35d/wmts?service=wmts&request=gettile&version=1.0.0&layer=cia&style=default&tilematrixset=c&format=tiles&tilematrix={z}&tilerow={y}&tilecol={x}&geokey=94E99EB4FEB9B48CD5348F7BCF5BB620',
      projection: getProjection(),
    }),
  });
}

//fxpc天地图地形图底图
export function getTiandituDemMap() {
  return new TileLayer({
    title: '天地图地形图底图',
    source: new XYZ({
      crossOrigin: 'Anonymous', // 是否请求跨域操作
      url: 'https://fxpc.mem.gov.cn/data_preparation/171dd1d5-bbb3-483a-a7f6-50d6d98cee1f/9a10d9a2-e2be-45bb-8ddc-4fa3004022e4/wmts?service=wmts&request=gettile&version=1.0.0&layer=ter&style=default&tilematrixset=c&format=tiles&tilematrix={z}&tilerow={y}&tilecol={x}&geokey=94E99EB4FEB9B48CD5348F7BCF5BB620',
      projection: getProjection(),
    }),
  });
}

//fxpc天地图地形图注记（显示为空，可不添加）
export function getTiandituDemText() {
  return new TileLayer({
    title: '天地图地形图注记',
    source: new XYZ({
      crossOrigin: 'Anonymous', // 是否请求跨域操作
      url: 'https://fxpc.mem.gov.cn/data_preparation/171dd1d5-bbb3-483a-a7f6-50d6d98cee1f/2f817c65-a621-48d7-91d7-fb4fd12657a8/wmts?service=wmts&request=gettile&version=1.0.0&layer=cat&style=default&tilematrixset=c&format=tiles&tilematrix={z}&tilerow={y}&tilecol={x}&geokey=94E99EB4FEB9B48CD5348F7BCF5BB620',
      projection: getProjection(),
    }),
  });
}

//超图中国地图
export function getChinaBaseLayer(map) {
  //根据layerUrl查询并添加瓦片地图图层REST
  let layerUrl = iServerHttp() + '/iserver/services/map-China100/rest/maps/China_Blue_4490';
  //瓦片地图图层
  let mapService = new MapService(layerUrl); //根据超图REST图层获取图层信息
  mapService.getMapInfo(function (serviceResult) {
    if (serviceResult.result != undefined) {
      let mapJSONObj = serviceResult.result;
      console.log('mapJSONObj--' + layerUrl);
      console.log(mapJSONObj);
      //获取超图发布的REST图层
      //let options = TileSuperMapRest.optionsFromMapJSON(layerUrl, mapJSONObj);
      let layerName = mapJSONObj.name; //图层名称
      //获取图层范围
      let bounds = mapJSONObj.bounds;
      let left = bounds.left;
      let bottom = bounds.bottom;
      let right = bounds.right;
      let top = bounds.top;
      let origin = [left, top]; //左上角
      let extent = [left, bottom, right, top]; //图层范围
      //获取超图发布的REST图层（自定义比例尺）
      let layer = getRESTLayer(layerUrl, null, origin, extent, mapJSONObj, 17);
      map.addLayer(layer);
      //设置图层叠加顺序
      layer.setZIndex(0);
      layer.set('id', 'china_blue');
    }
  });
}
export function getChinaBasePromise() {
  return new Promise((resole, reject) => {
    //根据layerUrl查询并添加瓦片地图图层REST
    let layerUrl = iServerHttp() + '/iserver/services/map-China100/rest/maps/China_Blue_4490';
    //瓦片地图图层
    let mapService = new MapService(layerUrl); //根据超图REST图层获取图层信息
    mapService.getMapInfo(function (serviceResult) {
      if (serviceResult.result != undefined) {
        let mapJSONObj = serviceResult.result;
        console.log('mapJSONObj--' + layerUrl);
        console.log(mapJSONObj);
        //获取超图发布的REST图层
        //let options = TileSuperMapRest.optionsFromMapJSON(layerUrl, mapJSONObj);
        let layerName = mapJSONObj.name; //图层名称
        //获取图层范围
        let bounds = mapJSONObj.bounds;
        let left = bounds.left;
        let bottom = bounds.bottom;
        let right = bounds.right;
        let top = bounds.top;
        let origin = [left, top]; //左上角
        let extent = [left, bottom, right, top]; //图层范围
        //获取超图发布的REST图层（自定义比例尺）
        let layer = getRESTLayer(layerUrl, null, origin, extent, mapJSONObj, 17);
        //设置图层叠加顺序
        layer.setZIndex(0);
        layer.set('id', 'china_blue');
        resole(layer);
      }
    });
  });
}

//超图中国地图投影坐标系3857
export function getChinaBaseLayer3857(map) {
  //根据layerUrl查询并添加瓦片地图图层REST
  let layerUrl = iServerHttp() + '/iserver/services/map-China100/rest/maps/China_Blue_3857';
  //瓦片地图图层
  let mapService = new MapService(layerUrl); //根据超图REST图层获取图层信息
  mapService.getMapInfo(function (serviceResult) {
    if (serviceResult.result != undefined) {
      let mapJSONObj = serviceResult.result;
      console.log('mapJSONObj--' + layerUrl);
      console.log(mapJSONObj);
      //获取超图发布的REST图层
      //let options = TileSuperMapRest.optionsFromMapJSON(layerUrl, mapJSONObj);
      let layerName = mapJSONObj.name; //图层名称
      //获取图层范围
      let bounds = mapJSONObj.bounds;
      let left = bounds.left;
      let bottom = bounds.bottom;
      let right = bounds.right;
      let top = bounds.top;
      let origin = [left, top]; //左上角
      let extent = [left, bottom, right, top]; //图层范围
      //获取超图发布的REST图层（自定义比例尺）
      let layer = getRESTLayer3857(layerUrl, null, origin, extent, mapJSONObj, 17);
      map.addLayer(layer);
      //设置图层叠加顺序
      layer.setZIndex(0);
    }
  });
}

//超图中国地图（显示省份名称）
export function getChinaBaseProvinceLayer(map) {
  //根据layerUrl查询并添加瓦片地图图层REST
  let layerUrl = iServerHttp() + '/iserver/services/map-China100/rest/maps/China_Blue_Text_4490';
  // let layerUrl =
  //   iServerHttp() +
  //   '/iserver/services/map-shpypg/rest/maps/%E4%BA%94%E4%BB%A3%E5%9B%BE%E5%85%A8%E5%9B%BD%E6%96%AD%E8%A3%82';
  //瓦片地图图层
  let mapService = new MapService(layerUrl); //根据超图REST图层获取图层信息
  mapService.getMapInfo(function (serviceResult) {
    if (serviceResult.result != undefined) {
      let mapJSONObj = serviceResult.result;
      console.log('mapJSONObj--' + layerUrl);
      console.log(mapJSONObj);
      //获取超图发布的REST图层
      //let options = TileSuperMapRest.optionsFromMapJSON(layerUrl, mapJSONObj);
      let layerName = mapJSONObj.name; //图层名称
      //获取图层范围
      let bounds = mapJSONObj.bounds;
      let left = bounds.left;
      let bottom = bounds.bottom;
      let right = bounds.right;
      let top = bounds.top;
      let origin = [left, top]; //左上角
      let extent = [left, bottom, right, top]; //图层范围
      //获取超图发布的REST图层（自定义比例尺）
      // let layer = getRESTLayer(layerUrl, null, origin, extent, mapJSONObj, 17);
      let result = getVectorTileLayer(map, layerUrl, origin, extent, map.getView(), mapJSONObj, null, 0);
      let layer = result[0];
      // let layer = getRESTLayer3857(layerUrl, null, origin, extent, mapJSONObj, 17);
      map.addLayer(layer);
      //设置图层叠加顺序
      // result[0].setZIndex(1);
      layer.setZIndex(1);
    }
  });
}
export function getTileLayer(url, map) {
  return new Promise((resolve, reject) => {
    //根据layerUrl查询并添加瓦片地图图层REST
    let layerUrl = iServerHttp() + url;
    // let layerUrl = iServerHttp() + '/iserver/services/map-China100/rest/maps/China_Blue_Text_4490';
    //瓦片地图图层
    let mapService = new MapService(layerUrl); //根据超图REST图层获取图层信息
    mapService.getMapInfo(function (serviceResult) {
      if (serviceResult.result != undefined) {
        let mapJSONObj = serviceResult.result;
        console.log('mapJSONObj--' + layerUrl);
        console.log(mapJSONObj);
        //获取超图发布的REST图层
        //let options = TileSuperMapRest.optionsFromMapJSON(layerUrl, mapJSONObj);
        let layerName = mapJSONObj.name; //图层名称
        //获取图层范围
        let bounds = mapJSONObj.bounds;
        let left = bounds.left;
        let bottom = bounds.bottom;
        let right = bounds.right;
        let top = bounds.top;
        let origin = [left, top]; //左上角
        let extent = [left, bottom, right, top]; //图层范围
        //获取超图发布的REST图层（自定义比例尺）
        // let layer = getRESTLayer(layerUrl, null, origin, extent, mapJSONObj, 17);
        let result = getVectorTileLayer(map, layerUrl, origin, extent, map.getView(), mapJSONObj, null, 0);
        let layer = result[0];
        resolve(layer);
      }
    });
  });
}
/**
 * 栅格layer
 */
export function getGridLayer(url) {
  return new Promise((resolve, reject) => {
    //根据layerUrl查询并添加瓦片地图图层REST
    let layerUrl = iServerHttp() + url;
    //瓦片地图图层
    let mapService = new MapService(layerUrl); //根据超图REST图层获取图层信息
    mapService.getMapInfo(function (serviceResult) {
      if (serviceResult.result != undefined) {
        let mapJSONObj = serviceResult.result;
        console.log('mapJSONObj--' + layerUrl);
        console.log(mapJSONObj);
        //获取超图发布的REST图层
        //let options = TileSuperMapRest.optionsFromMapJSON(layerUrl, mapJSONObj);
        let layerName = mapJSONObj.name; //图层名称
        //获取图层范围
        let bounds = mapJSONObj.bounds;
        let left = bounds.left;
        let bottom = bounds.bottom;
        let right = bounds.right;
        let top = bounds.top;
        let origin = [left, top]; //左上角
        let extent = [left, bottom, right, top]; //图层范围
        //获取超图发布的REST图层（自定义比例尺）
        let layer = getRESTLayer(layerUrl, null, origin, extent, mapJSONObj, 17);
        layer.setZIndex(1);
        resolve(layer);
      } else {
        reject('获取图层信息失败');
      }
    });
  });
}
//获取超图发布的REST图层（自定义比例尺）
export function getRESTLayer(layerUrl, layerID, origin, extent, serviceResult, maxZoom) {
  //获取tileGrid（自定义比例尺）
  let tileGrid = getTileGrid(origin, extent);
  if (layerID == null) {
    //临时图层ID
    layerID = '';
  }

  // let tileOptions = TileSuperMapRest.optionsFromMapJSON(layerUrl, serviceResult);
  //自定义瓦片参数对象
  let tileOptions = {};
  tileOptions.url = layerUrl;
  tileOptions.crossOrigin = 'anonymous';
  tileOptions.tileGrid = tileGrid;
  tileOptions.layersID = layerID; //临时图层ID
  tileOptions.projection = projection; //设置projection4490
  tileOptions.dpi = 96; //超图使用，防止图层偏移
  tileOptions.cacheEnabled = false; //是否使用缓存
  return new TileLayer({
    source: new TileSuperMapRest(tileOptions),
    projection: projection,
  });
}

//获取超图发布的REST图层（自定义比例尺）3857
export function getRESTLayer3857(layerUrl, layerID, origin, extent, serviceResult, maxZoom) {
  //获取tileGrid（自定义比例尺）
  let tileGrid = getTileGrid3857(origin, extent);
  if (layerID == null) {
    //临时图层ID
    layerID = '';
  }

  // let tileOptions = TileSuperMapRest.optionsFromMapJSON(layerUrl, serviceResult);
  //自定义瓦片参数对象
  let tileOptions = {};
  tileOptions.url = layerUrl;
  tileOptions.crossOrigin = 'anonymous';
  tileOptions.tileGrid = tileGrid;
  tileOptions.layersID = layerID; //临时图层ID
  tileOptions.projection = 'EPSG:3857'; //设置projection3857
  tileOptions.dpi = 96; //超图使用，防止图层偏移
  tileOptions.cacheEnabled = false; //是否使用缓存
  return new TileLayer({
    source: new TileSuperMapRest(tileOptions),
    projection: 'EPSG:3857',
  });
}

//获取超图发布的REST矢量切片图层（自定义比例尺）
export function getVectorTileLayer(map, layerUrl, origin, extent, view, serviceResult, sqlText, minZoom) {
  //处理sql对象
  let sqlObjArray = [];
  if (sqlText != null && sqlText !== '') {
    let sqlArray = sqlText.split('and');
    for (let i = 0; i < sqlArray.length; i++) {
      let sqlStrArr = sqlArray[i].trim().split(' like ');
      let fieldProp = sqlStrArr[0];
      let fieldValue = sqlStrArr[1];
      let sqlObj = {
        fieldProp: fieldProp,
        fieldValue: fieldValue,
      };
      sqlObjArray.push(sqlObj);
    }
  }
  /*//test
    sqlObjArray = [{
        fieldProp:"name",
        fieldValue:"'%北京%'"
    }];*/
  console.log('sqlObjArray', sqlObjArray);
  //矢量瓦片风格参数对象
  let stylesOptions = {
    url: layerUrl,
    view: view,
  };
  //创建瓦片风格对象
  let vectorTileStyles = new VectorTileStyles(stylesOptions);
  console.log('vectorTileStyles', vectorTileStyles);
  //通过地图信息获取瓦片参数对象
  // let vectorTileOptions = VectorTileSuperMapRest.optionsFromMapJSON(layerUrl, serviceResult);
  //自定义瓦片参数对象
  let vectorTileOptions = {};
  vectorTileOptions.url = layerUrl;
  vectorTileOptions.crossOrigin = 'anonymous';
  //获取tileGrid（自定义比例尺）
  let tileGrid = getTileGrid(origin, extent);
  vectorTileOptions.tileGrid = tileGrid;
  vectorTileOptions.sqlObjArray = sqlObjArray; //设置sql查询对象数组
  vectorTileOptions.projection = projection; //设置projection4490
  // vectorTileOptions.view = view;
  // vectorTileOptions.minZoom = 10;//最小显示的地图级别
  console.log('vectorTileOptions', vectorTileOptions);
  let source = new VectorTileSuperMapRest(vectorTileOptions); //重写tileUrlFunction、tileLoadFunction（自定义比例尺）
  console.log('source', source);
  //返回超图发布的REST矢量切片图层（自定义比例尺）
  let layer = new VectorTileLayer({
    minZoom: minZoom,
    source: source,
    style: vectorTileStyles.featureStyleFuntion,
  });
  console.log('layer---', layer);
  return [layer, vectorTileStyles];
}

export function getBeiJingLayer(map) {
  // http://10.13.155.192:8090/iserver/services/map-datacenter/rest/maps/district_boundary_city_11_beijing@datacenter
  let layerUrl =
    iServerHttp() + '/iserver/services/map-datacenter/rest/maps/district_boundary_city_11_beijing@datacenter';
  //瓦片地图图层
  let mapService = new MapService(layerUrl); //根据超图REST图层获取图层信息
  mapService.getMapInfo(function (serviceResult) {
    if (serviceResult.result != undefined) {
      let mapJSONObj = serviceResult.result;
      console.log('mapJSONObj--' + layerUrl);
      console.log(mapJSONObj);
      //获取超图发布的REST图层
      //let options = TileSuperMapRest.optionsFromMapJSON(layerUrl, mapJSONObj);
      let layerName = mapJSONObj.name; //图层名称
      //获取图层范围
      let bounds = mapJSONObj.bounds;
      let left = bounds.left;
      let bottom = bounds.bottom;
      let right = bounds.right;
      let top = bounds.top;
      let origin = [left, top]; //左上角
      let extent = [left, bottom, right, top]; //图层范围
      //获取超图发布的REST图层（自定义比例尺）
      // let layer = getRESTLayer(layerUrl, null, origin, extent, mapJSONObj, 17);
      let result = getVectorTileLayer(map, layerUrl, origin, extent, map.getView(), mapJSONObj, null, 0);
      // start
      let vectorTileStyles = result[1];
      // vectorTileStyles.setCustomStyleFuntion(setCustomStyles());
      // end
      let layer = result[0];
      layer.set('id', 'province');

      map.addLayer(layer);
      //设置图层叠加顺序
      result[0].setZIndex(1);
    }
  });
}
export function getChinaBaseMap() {
  //根据layerUrl查询并添加瓦片地图图层REST
  let mapUrl = `${import.meta.env.BASE_URL}china.json`;
  return mapUrl;
}
//中国地图
export function getChinaBase() {
  let mapUrl = `${import.meta.env.BASE_URL}china.json`;
  return new Promise((resolve, reject) => {
    fetch(mapUrl)
      .then((response) => response.json()) // 将响应解析为 JSON 数据
      .then((geojson) => {
        console.log('geojson', geojson);
        resolve(geojson);
      })
      .catch((error) => {
        console.error('Error fetching or processing GeoJSON:', error);
      });
  });
}
export function getChinaBaseFeature() {
  let mapUrl = `${import.meta.env.BASE_URL}china.json`;
  return new Promise((resolve, reject) => {
    fetch(mapUrl)
      .then((response) => response.json()) // 将响应解析为 JSON 数据
      .then((geojson) => {
        // 使用 GeoJSON 格式解析器将数据转换为 Features
        const geojsonFormat = new GeoJSonFormat();
        let features = geojsonFormat.readFeatures(geojson);
        resolve(features);
      })
      .catch((error) => {
        console.error('Error fetching or processing GeoJSON:', error);
      });
  });
}
export function getBaseDir(url) {
  //根据layerUrl查询并添加瓦片地图图层REST
  let baseUrl = `${import.meta.env.BASE_URL}${url}`;
  return baseUrl;
}
